<template>
<div class="">
  <div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{path: '/home'}"><i class="el-icon-setting"></i> 首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/photo'}">楼盘相册</el-breadcrumb-item>
      <el-breadcrumb-item>编辑</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="block">
      <el-upload :action="uploadUrl" list-type="picture-card" :on-preview="handlePictureCardPreview" :file-list="fileList" :multiple="true" :auto-upload="true" :on-success="uploadSuccess" :on-remove="handlePictureRemove">
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">只能上传gif/jpg/png文件，且不超过1000kb</div>
      </el-upload>


      <el-dialog v-model="dialogVisible" size="tiny">
          <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <div class="block" style="margin-top:30px;">
          <el-row>
              <el-col :span="5" v-for="(img, index) in imgs" :offset="index > 0 ? 1 : 0">
                  <el-card :body-style="{ padding: '0px' }">
                      <img :src="webUrl + img.f_path" class="image" @click="handlePictureCardPreview">
                      <div style="padding: 14px;">
                          <span>{{ img.f_remark }}</span>
                          <div class="bottom clearfix">
                              <!-- <el-button type="text" class=" button el-icon-picture" v-show="img.h_img == img.f_path"></el-button> -->
                              <!-- <el-button type="text" class="button" @click="setImg(img.f_id)" v-show="img.h_img != img.f_path">设为主图</el-button> -->
                              <el-input v-model="img.f_sort" style="width:50px;margin-right:10px;"></el-input>
                              <el-button type="text" @click="sortEdit(img)" class="button el-icon-edit"></el-button>
                              <el-button type="text" class="button el-icon-delete"></el-button>
                          </div>
                      </div>
                  </el-card>
              </el-col>
          </el-row>
      </div>
  </div>
  <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="postData.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="postData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="resultTotal">
      </el-pagination>
  </div>
</div>
</template>

<script>
import Objres from '@/components/common/ObjResult';
let token = localStorage.getItem('admin-token');
// import webconfig from '@/components/common/WebSet';
import Quill from 'quill';
// import { ImageImport } from '@/ex/ImageImport';
import { ImageResize } from '@/ex/ImageResize';
// Quill.register({'modules/ImageImport': ImageImport});
Quill.register('modules/imageResize', ImageResize);

import { quillEditor } from 'vue-quill-editor';

export default {
    data () {
        return {
            resultTotal: 0,
            postData: {
                'pageSize': 10,
                'page': 1,
                'searchValue': '',
                'orderBy': 'f_create_time',
                'orderType': 0,
                'pid': this.$route.params.id
            },
            loading: true,
            imgs: {},
            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            uploadUrl: this.WEB_CONFIG.weburl + '/admin/file/save?id=' + this.$route.params.id + '&token=' + token + '&category=Photo',
            webUrl: this.WEB_CONFIG.weburl
            // uploadName: ''
        };
    },
    methods: {
        handleSizeChange (val) {
            this.postData.pageSize = val;
            this.getResultByPage();
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange (val) {
            this.page = val;
            this.getResultByPage();
            // console.log(`当前页: ${val}`);
        },
        getResultByPage () {
            let self = this;
            let token = localStorage.getItem('admin-token');
            console.log(token);
            if (token) {
                self.loading = true;
                this.$http.post(
                    self.WEB_CONFIG.weburl + '/admin/file/list?token=' + token,
                    self.postData,
                    {'emulateJSON': true}
                    // {headers: {'Content-Type': 'multipart/form-data'}}
                ).then((response) => {
                    self.loading = false;
                    let res = response.body;
                    // console.log(res);
                    if (res.status === Objres.ObjResult.RESULT_OK) {
                        self.imgs = res.data.result;
                        self.resultTotal = parseInt(res.data.total);
                    }
                });
            } else {
                this.$message({message: '请登陆', type: 'error'});
                self.$router.push('/login');
            }
        },
        handlePictureRemove (file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        imgsFormat (data) {
            let self = this;
            if (data.length > 0) {
                self.fileList = [];
                for (var i = 0; i < data.length; i++) {
                    self.fileList.push(
                        {
                            name: '',
                            url: self.webUrl + data[i].f_path,
                            status: 'finished'
                        }
                    );
                }
            }
        },
        uploadSuccess (res, file, fileList) {
            if (res && res.status === Objres.ObjResult.RESULT_OK) {
                this.getResultByPage();
            }
            console.log('uploadSuccess==res======', res);
        },
        setImg (id) {
            let self = this;
            console.log(id);
            if (token) {
                this.$http.get(
                    self.webUrl + '/admin/file/setmainimg?token=' + token + '&id=' + id
                    // {headers: {'Content-Type': 'multipart/form-data'}}
                ).then((response) => {
                    let res = response.body;
                    // console.log(res);
                    if (res.status === Objres.ObjResult.RESULT_OK) {
                        this.getResultByPage();
                        this.$message({message: '设置主图成功!', type: 'success'});
                    }
                });
            } else {
                this.$message({message: '请登陆', type: 'error'});
                self.$router.push('/login');
            }
        },
        sortEdit (img) {
            console.log(img);
            let self = this;
            if (token) {
                console.log('123123213');
                this.$http.get(
                    self.webUrl + '/admin/file/sort?token=' + token + '&id=' + img.f_id + '&sort=' + img.f_sort
                    // {headers: {'Content-Type': 'multipart/form-data'}}
                ).then((response) => {
                    let res = response.body;
                    // console.log(res);
                    if (res.status === Objres.ObjResult.RESULT_OK) {
                        this.getResultByPage();
                        this.$message({message: '更新成功!', type: 'success'});
                    }
                });
            } else {
                this.$message({message: '请登陆', type: 'error'});
                self.$router.push('/login');
            }
        }
    },
    created () {
        if (this.$route.params.id) {
            this.getResultByPage();
        }
    },
    components: {
        quillEditor
    }
};
</script>

<style lang="css">
.image{
    width: 100%;
}
</style>
